/**
 * Created by lipeng on 2019/5/5.
 */

new Vue({
  el: '#app',
  data: {
    msg: "Hello Word",
    aiList:[
      {
        active:0,
        num:01,
        icon:'icon-yizhanguanli',
        title:'人脸识别门禁',
        desc:'支持人脸、指纹、刷卡、密码等多种开门方式，可根据实际情况自由组合，提升安全管理等级；支持对接公安部数据库对入住人员进行人、证、照三合一核验，杜绝高危人群。'
      },
      {
        active:0,
        num:02,
        icon:'icon-yizhanguanli',
        title:'智能监控',
        desc:'楼梯楼道全部安装智能监控摄像头，对接云端，房东和租均可通过手机远程实时查看监控情况和会看监控记录；支持移动侦测，异常情况自动报警推送，语音视频对讲，全方位掌握安全情况。'
      },
      {
        active:0,
        num:03,
        icon:'icon-yizhanguanli',
        title:'智能水电',
        desc:'免抄表，水电费实行预付费，用水用电自动扣费，欠费自动提醒并停水停电，租客通过APP充值缴费后自动恢复；房东APP自主设置水电单价，实时读取仪表读数，手机远程控制断水断电，智能催缴。'
      },
      {
        active:0,
        num:04,
        icon:'icon-yizhanguanli',
        title:'人脸识别门禁',
        desc:'支持人脸、指纹、刷卡、密码等多种开门方式，可根据实际情况自由组合，提升安全管理等级；支持对接公安部数据库对入住人员进行人、证、照三合一核验，杜绝高危人群。'
      },
    ]
  },
  created: function () {

  },
  mounted: function () {
    this.initSwiper();
  },
  methods: {
    websitOver: function (index) {
      for (var i = 0; i < this.websitList.length; i++) {
        this.websitList[i].active = 0;
      }
      this.websitList[index].active = 1;
    },
    initSwiper: function () {
      var self = this;
      var zxjManager = new Swiper('#zxjManager', {
        loop: true,
        slidesPerView: 3,
        spaceBetween: 100,
        breakpoints: {
          1024: {
            slidesPerView: 3,
            spaceBetween: 100,
          },
          768: {
            slidesPerView: 1,
            spaceBetween: 0,
          },
        },
        navigation: {
          nextEl: '.m-swiper-button-next',
          prevEl: '.m-swiper-button-prev',
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
          },
        },
        on: {
          slideChangeTransitionEnd: function () {
            for (var i=0;i<self.aiList.length;i++){
              self.aiList[i].active = 0;
            }
            self.aiList[this.realIndex].active = 1;
          },
        },
      });
      var zxjService = new Swiper('#zxjService', {
        loop: true,
        autoplay: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
          },
        }
      });
      var zxjProduct = new Swiper('#zxjProduct', {
        loop: true,
        autoplay: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
          },
        }
      });
    },

  }
});